<template>
  <div class="nrguanli">
    <div class="shang">
      <div class="tab">
        <div class="item shoushou" @click="tab(1)">
          文章
          <div class="xian" v-if="type==1"></div>
        </div>
        <div class="item shoushou" @click="tab(2)">
          视频
          <div class="xian" v-if="type==2"></div>
        </div>
        <div class="item shoushou" @click="tab(5)">
          小视频
          <div class="xian" v-if="type==5"></div>
        </div>
        <div class="item shoushou" @click="tab(4)">
          投票
          <div class="xian" v-if="type==4"></div>
        </div>
        <div class="item shoushou" @click="tab(3)">
          问答
          <div class="xian" v-if="type==3"></div>
        </div>
      </div>

      <div class="timeselect">
        <div class="timeleft" style="margin-right:13px;">
          <div class="timezi">发布状态:</div>
          <div class="timeitem shoushou" :class="[status==0?'timeitem_s':'']" @click="selectstaus(0)">全部</div>
          <div class="timeitem shoushou" :class="[status==1?'timeitem_s':'']" @click="selectstaus(1)">已发布</div>
          <div class="timeitem shoushou" :class="[status==2?'timeitem_s':'']" @click="selectstaus(2)">未通过</div>
          <div class="timeitem shoushou" :class="[status==3?'timeitem_s':'']" @click="selectstaus(3)">已撤回</div>

          <div class="timeitem shoushou" v-if="type!=3&&type!=4" :class="[status==4?'timeitem_s':'']" @click="selectstaus(4)">草稿箱</div>
        </div>

        <div class="timemid">
          <div class="timezi" style="margin-right:30px;">文章标题:</div>
          <div class="inputbox">
            <input type="text" v-model="title" @input="getlist" placeholder="请输入关键字" />
          </div>
        </div>

        <div class="timeright">
          <div class="timezi">起止时间:</div>
          <!-- <div class="boxtcj">
           
          </div>-->
          <el-date-picker
            class="boxtcj"
            v-model="value1"
            type="daterange"
            range-separator="至"
            value-format="yyyy-MM-dd"
            @change="xuanriqi"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
          <!-- <div class="hengtcj">-</div>
          <div class="boxtcj">
            <el-date-picker v-model="value2" type="date" @change="xuanriqi" placeholder="选择日期"></el-date-picker>
          </div>-->
        </div>
      </div>
    </div>

    <div class="nr" >
      <div class="titile">共找到{{list.length}}篇内容</div>
      <div class="nr-item"  v-for="(item,index) in list" :key="index">
        <div class="left">
          <div class="left-left" v-if="item.cover[0]!=''&& item.cover.length!=0">
            <img v-if="item.cover[0]!='' && item.cover.length!=0 &&(type!=2&&type!=5)" class="item-tu" :src="item.cover[0]" />

            <img v-if="item.cover!='' &&(type==2||type==5)" class="item-tu" :src="item.cover" />
          </div>
          <div class="left-right">
            <div v-if="type!=2&&type!=5" class="left-right-title">{{item.title}}</div>

            <div v-if="type==2||type==5" class="left-right-title">{{item.file_name}}</div>

            <div class="left-right-box">
              <div class="num-item">
                <img src="../assets/nrguanli/n1.png" alt />
                <div class="num">{{item.pageview}}</div>
                <div class="shuxian"></div>
              </div>
              <div class="num-item">
                <img src="../assets/nrguanli/n2.png" alt />
                <div class="num">{{item.share}}</div>
                <div class="shuxian"></div>
              </div>
              <div class="num-item">
                <img src="../assets/nrguanli/n3.png" alt />
                <div class="num">{{item.collections_count}}</div>
                <div class="shuxian"></div>
              </div>
              <div class="num-item">
                <img src="../assets/nrguanli/n4.png" alt />
                <div class="num">{{item.like_count}}</div>
                <div class="shuxian"></div>
              </div>
              <div class="num-item">
                <img src="../assets/nrguanli/n5.png" alt />
                <div class="num">{{item.comment_count}}</div>
              </div>
            </div>

            <div class="btnbox">
              <div class="btn" style="margin-right:10px;" v-if="item.top==1">置顶</div>

              <div class="btn" v-if='item.examine==1&&item.is_recall==0'>已发布</div>

               <div class="btn" v-if='item.examine==0&&item.is_recall==0'>未审核</div>

              <div class="btn" v-if="item.examine==2">未通过</div>
              <div class="btn"  v-if="item.is_recall==1">已撤回</div>

              <div class="btn"  v-if="item.is_recall==2">草稿箱</div>
            </div>

            <div class="time-js">{{item.timeText}}</div>
          </div>
        </div>
        <div class="right">
          <div class="right-item shoushou" style="margin-bottom: 23px;" @click="c_fenxiang(index)">
            <img src="../assets/nrguanli/n6.png" alt />
            <div class="caozuo">分享</div>
          </div>

          <div class="right-item shoushou" style="margin-bottom: 23px;" v-if="item.is_recall==2" @click="c_edit(index)">
            <img src="../assets/nrguanli/n7.png" alt />
            <div class="caozuo">编辑</div>
          </div>


          <div class="right-item shoushou" @click="c_gengduo(index)">
            <img src="../assets/nrguanli/n8.png" alt />
            <div class="caozuo">更多</div>
          </div>

          <div class="fx-tc" v-if="item.showfxtc==true">
            <div class="fx-tc-item shoushou" @click="share('QQ',item)">
              <img style="margin-right:7px;" src="../assets/nrguanli/q11.png" alt />
              <div class="caozuo">QQ</div>
            </div>
            <div class="fx-tc-item shoushou" @click="share('weibo',item)">
              <img style="margin-right:7px;" src="../assets/nrguanli/q22.png" alt />
              <div class="caozuo">新浪微博</div>
            </div>
            <div class="fx-tc-item fx-tc-item3 shoushou" @click="share('wx',item)">
              <img style="margin-right:7px;" src="../assets/nrguanli/q33.png" alt />
              <div class="caozuo">微信</div>

            
            </div>
          </div>

          <div class="fx-tc" v-if="item.showgdtc==true" style="top:70px;">
            <div class="fx-tc-item shoushou" @click="chehui(index)" v-if='item.examine==1&&item.is_recall==0'>
              <!-- <img style="margin-right:7px;" src="../assets/nrguanli/q11.png" alt /> -->
              <div class="caozuo">撤回</div>
            </div>


             <div class="fx-tc-item shoushou" @click="chehui(index)" v-if='item.is_recall==1'>
              <!-- <img style="margin-right:7px;" src="../assets/nrguanli/q11.png" alt /> -->
              <div class="caozuo">取消撤回</div>
            </div>
           

            <div class="fx-tc-item shoushou" @click="zhiding(index)">
              <!-- <img style="margin-right:7px;" src="../assets/nrguanli/q22.png" alt /> -->
              <div class="caozuo">置顶</div>
            </div>
            <div class="fx-tc-item shoushou" @click="xunwendel(index)">
              <!-- <img style="margin-right:7px;" src="../assets/nrguanli/q33.png" alt /> -->
              <div class="caozuo">删除</div>
            </div>
          </div>
        </div>
      </div>

      
    </div>

  
    <tc :tcdata="tcdata" @tuichutc="tuichutc" @queding="queding" v-if="tcdata.show"></tc>



    <div class="wxcode" v-show="showwxcode==true">
        <div class="wxcodenr">
          <div class="head">
              <div></div>
              <div>扫一扫分享到微信</div>
              <img class="shoushou" @click="tuichuwxcode" src="../assets/tc/close.png" alt="">
          </div>
          <div style="margin-top:30px;" id="qrcode"></div>
        </div>
    </div>
  </div>
</template>

<script>
import tc from "./tc.vue";

import QRCode from "qrcodejs2"; // 引入qrcode

export default {
  components: {
    tc: tc,
    QRCode
  },


  data() {
    return {
      // key: value

      // showgdtc:false,
      // showfxtc:false,

      value1: "",

      showwxcode: false,

      type: 1,

      status: 0,
      start: "",
      end: "",
      title: "",

      list: "",

      tcdata: {
        show:false,
        isdel: true,
        icon: 0,
        type: "提交",
        title: "提交成功"
      },


      xunwendelindex:"",
    };
  },
  mounted() {

    if(!localStorage.getItem('uqid')){
      this.$router.push({ path: "/login", query: {  } });
      return
    }



    var status = this.$route.query.status;
    var type=this.$route.query.type

    console.log(status);

    console.log(type);

    if(status!=undefined){
      this.status = status;
      this.type = type;
    }

    // ;
    this.getlist();
    var that = this;
    document.addEventListener("click", function(e) {
      var initem = false;

      e.path.forEach(element => {
        // console.log(initem,'1111111111111')
        if (element.className == "right-item") {
          initem = true;
        }
      });

      if (initem == false) {
        console.log(that.list);
        if (that.list.length != 0 || that.list.length != undefined) {
          that.list.forEach(element => {
            element.showgdtc = false;
            element.showfxtc = false;
          });
        }
      }
    });
  },
  methods: {
    tuichuwxcode(){
      this.showwxcode=false
    },

     getQrcode(url) {
      document.getElementById("qrcode").innerHTML = "";
      this.$nextTick(function() {
        //生成二维码
        this.qrcode(url);
      });
    },
    qrcode(url) {
      let that = this;
      let qrcode = new QRCode("qrcode", {
        width: 200,
        height: 200, // 高度
        text: url // 二维码内容
        // render: 'canvas' ,   // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        // background: '#f0f',   // 背景色
        // foreground: '#ff0'    // 前景色
      });

      this.showwxcode=true
    },
    //撤回
    chehui(index) {
        var that = this;
      this.$axios({
        method: "post",
        url: "media/descs/is_withdraw",
        data: this.$qs.stringify({
          uqid: localStorage.getItem("uqid"),
          aid: this.list[index].id,
          type: this.type
        }),
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
        }
      }).then(response => {
        console.log(response);
        if (response.data.error == "0") {
          this.$message({
            showClose: true,
            message: '操作成功',
            type: "success"
          });

          that.getlist();
        } else {
          this.$message({
            showClose: true,
            message: response.data.message,
            type: "error"
          });
        }
      });
    },
    //询问shanchu
    xunwendel(index){
      this.xunwendelindex=index
      this.tcdata={
        show:true,
        isdel: true,//anniu
        icon: 2,
        type: "删除",
        title: "你确定要删除吗？ "
      }
    },

    //删除
    shanchu() {
      var that = this;
      this.$axios({
        method: "post",
        url: "media/descs/is_del",
        data: this.$qs.stringify({
          uqid: localStorage.getItem("uqid"),
          aid: this.list[this.xunwendelindex].id,
          type: this.type
        }),
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
        }
      }).then(response => {
        console.log(response);
        if (response.data.error == "0") {
          this.$message({
            showClose: true,
            message: '已删除',
            type: "success"
          });

          that.getlist();
        } else {
          this.$message({
            showClose: true,
            message: response.data.message,
            type: "error"
          });
        }
      });
    },
    // 置顶
    zhiding(index) {
      // media/descs/is_top
      // uqid
      // aid
      // type
      var that = this;
      this.$axios({
        method: "post",
        url: "media/descs/is_top",
        data: this.$qs.stringify({
          uqid: localStorage.getItem("uqid"),
          aid: this.list[index].id,
          type: this.type
        }),
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
        }
      }).then(response => {
        console.log(response);
        if (response.data.error == "0") {
          this.$message({
            showClose: true,
            message: '已置顶',
            type: "success"
          });

          that.getlist();
        } else {
          this.$message({
            showClose: true,
            message: response.data.message,
            type: "error"
          });
        }
      });
    },
    c_edit(index) {
      this.$router.push({
        path: "/fawenedit2",
        query: { type: this.type, aid: this.list[index].id }
      });
    },
    c_fenxiang(index) {
      this.list.forEach(element => {
        element.showgdtc = false;
        element.showfxtc = false;
      });
      this.list[index].showfxtc = !this.list[index].showfxtc;
    },

    c_gengduo(index) {
      this.list.forEach(element => {
        element.showgdtc = false;
        element.showfxtc = false;
      });
      this.list[index].showgdtc = !this.list[index].showgdtc;
    },

    xuanriqi() {
      this.getlist();
    },
    selectstaus(index) {
      this.status = index;
      this.getlist();
    },
    tab(index) {
      this.type = index;
      this.getlist();
      if(index==1){
        this.$store.state.mianbaoxie=['乐讯号','内容管理','文章']
      }

      if(index==2){
        this.$store.state.mianbaoxie=['乐讯号','内容管理','视频']
      }
       if(index==3){
        this.$store.state.mianbaoxie=['乐讯号','内容管理','问答']
      }

      if(index==4){
        this.$store.state.mianbaoxie=['乐讯号','内容管理','投票']
      }
       if(index==5){
        this.$store.state.mianbaoxie=['乐讯号','内容管理','小视频']
      }

     
    },

    tuichutc(data) {
      this.tcdata.show=false
    },
    queding(data) {
      // console.log(data);
      this.tcdata.show=false
      this.shanchu()

    },

    share: function(type, itemdata) {
      // 获取窗口的宽高
      const screenInfo = window.screen;
      const newWindowArea = {
        height: (screenInfo.height / 3) * 2,
        width: (screenInfo.width / 3) * 2
      };
      // 打开窗口

      // var url= basrurl+'yaoqing?yaoqingma=123456'

      var url= 'http://sanyserver.51appdevelop.com/fenxiang?type='+ this.type +'&&id='+ itemdata.id +''
      // var url='https://www.cnblogs.com/wpp281154/p/10443519.html'

      if (type == "QQ") {
        
        var shareUrl =
          "https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url="+ encodeURIComponent(url) +"";
        window.open(
          shareUrl,
          "newwindow",
          `height=${newWindowArea.height}, width=${newWindowArea.width}`
        );

        // 获取当前网址要用encodeURIComponent(document.location)
      }
      if (type == "wx") {
        this.getQrcode(url);
      }
      if (type == "weibo") {  
        
        console.log(decodeURI(url))
        var shareUrl =
          "http://service.weibo.com/share/share.php?url="+ encodeURIComponent(url) +"";
        window.open(
          shareUrl,
          "newwindow",
          `height=${newWindowArea.height}, width=${newWindowArea.width}`
        );
      }
    },

    generateQRCode: function(url1) {
      const url = url1; //这里之所以取当前的链接是由于pc端做了正则适配到h5的链接，其实本质就是链接和二维码的转换而已.
      let QRCode = this.$QRCode;
      this.qrcodeImg = new QRCode("wechat-share-qrcode", {
        width: 128,
        height: 128,
        text: url, // 二维码地址
        colorDark: "#000",
        colorLight: "#fff"
      });
    },

    getlist() {
      // status
      // 0全部1已发布2未通过3已撤回4草稿
      // start
      // end
      // title

      this.$get(
        // method: "get",
        "media/descs/desc_list",
        {
          uqid: localStorage.getItem("uqid"),

          type: this.type,
          status: this.status,
          start: this.value1[0],
          end: this.value1[1],
          title: this.title,
          page: 1,
          limit: 1000
        }
      ).then(response => {
        console.log(response);
        if (response.error == "0") {
          response.data.forEach(element => {
            element.showgdtc = false;
            element.showfxtc = false;
          });

          this.list = response.data;
        } else {
          this.$message({
            showClose: true,
            message: response.data.message,
            type: "error"
          });
        }
      });
    }
  }
};
</script>

<style  scoped>
.head{
    width:100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    font-size:20px;
    font-weight:550;
    line-height:28px;
    color:rgba(51,51,51,1);
}
.wxcodenr{
   background:rgba(255,255,255,1);
    border:1px solid rgba(231,237,252,1);
    opacity:1;
    border-radius:4px;
    padding:16px 20px 45px;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;
   width:394px;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);

}
.wxcode{
  width:100vw;
  height:100vh;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.5);
  top:0;
  left:0;
}
.fx-tc-item {
  height: 32px;
  padding-left: 17px;
  display: flex;
  align-items: center;
  cursor:pointer;
}



.fx-tc-item:hover {
  background-color: #ededed;
}
.fx-tc {
  display: flex;
  flex-direction: column;
  padding: 5px 0;
  box-sizing: border-box;
  width: 110px;
  /* height: 111px; */
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(231, 237, 252, 1);
  position: absolute;
  left: -136px;
  top: -9px;
}
.caozuo {
  font-size: 12px;

  font-weight: 400;
}
.right {
  position: relative;
}
.right-item {
  display: flex;
  align-items: center;

  margin-right: 14px;
}
.right-item img {
  width: 14px;
  margin-right: 5px;
}

.time-js {
  font-size: 10px;
  font-weight: 400;
  line-height: 14px;
  color: rgba(172, 172, 172, 1);
  margin-top: 15px;
}
.btnbox {
  display: flex;
  align-items: center;
  margin-top: 9px;
}
.btn {
  width: 45px;
  height: 22px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(38, 106, 255, 1);
  opacity: 1;
  border-radius: 500px;

  font-size: 10px;

  font-weight: 550;
  line-height: 22px;
  color: rgba(38, 106, 255, 1);
  text-align: center;
}
.shuxian {
  width: 1px;
  height: 8px;
  background: rgba(229, 229, 229, 1);
  margin: 0 6px;
}
.num-item {
  display: flex;
  align-items: center;
}
.num-item img {
  height: 12px;
  margin-right: 4px;
}
.left-right-box {
  height: 17px;
  display: flex;
  align-items: center;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 400;
  color: rgba(92, 92, 92, 1);
}
.left-right-title {
  font-size: 16px;
  font-weight: 550;
  line-height: 22px;
  color: rgba(51, 51, 51, 1);
}
.left-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.left-left {
  width: 195px;
  height: 124px;
  /* background: rgba(0, 0, 0, 1); */
  margin-right: 10px;
  border-radius: 4px;

  
}
.left {
  display: flex;
}
.right {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.item-tu {
  width: 195px;
  height: 124px;
  object-fit: contain; background: #eee;

}
.titile {
  font-size: 12px;
  line-height: 17px;
  color: rgba(51, 51, 51, 1);
}
.nr-item {
  height: 159px;
  width: 100%;
  border-bottom: 1px solid rgba(231, 237, 252, 1);
  padding: 18px 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nr::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.nrguanli {
  height: calc(100% - 118px);
  display: flex;
  flex-direction: column;
}

.nr {
  width: 100%;
  background: rgba(255, 255, 255, 1);
  flex: 1;
  margin-top: 20px;
  overflow: hidden;
  overflow-y: scroll;
  padding: 19px 12px 0;
  box-sizing: border-box;
}
.timemid {
  display: flex;
  align-items: center;
}
.shang {
  width: 100%;
  height: 128px;
  background: rgba(255, 255, 255, 1);
  opacity: 1;
  padding: 20px 19px;
  box-sizing: border-box;
}
.tab {
  display: flex;
}
.xian {
  width: 34px;
  height: 3px;
  background: rgba(38, 106, 255, 1);
  opacity: 1;
  position: absolute;
  bottom: -8px;
  left:50%;
  transform: translate(-50%,0);
}
.item {
  margin-right: 47px;
  position: relative;
  font-weight: 600;
  font-size:16px;
}

.timeselect {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* padding: 0 19px; */
  margin-top: 32px;
}
.hengtcj {
  margin: 0 8px;
}
.timeleft,
.timeright {
  display: flex;
  align-items: center;
}

.timeright {
}

.timezi {
  font-size: 14px;
  font-weight: 550;
  line-height: 20px;
  color: rgba(51, 51, 51, 1);
  margin-right: 13px;
}
.timeitem {
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  margin-right: 13px;
}
.inputbox {
  width: 174px;
  height: 37px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(231, 237, 252, 1);
  opacity: 1;
  border-radius: 6px;
  display: flex;
  align-items: center;
}
.inputbox > input {
  font-size: 12px;
  text-indent: 13px;
}

.timeitem_s {
  color: rgba(38, 106, 255, 1);
}
</style>
<style >
.el-icon-date:before {
  content: "";
  display: block;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../assets/fans/f4.png);
}
</style>